import React, { Component } from 'react';
import { Text, Image, View, TextInput, TouchableOpacity } from 'react-native';
import { unitWidth } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_member_info_addBank } from '../constants/HttpServices';
import { SubmitButton1 } from '../components/Button';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ExamineView } from '../components/EmptyView';

export default class AddBankScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.state = {
            name: '',
            card_number: '',
            opening_bank: '',
        }
    }

    componentWillMount() {

    }

    componentWillUnmount() {

    };

    render() {
        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='绑定银行卡' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onNameTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*持卡人：</Text>
                    }
                    maxLength={20}
                    placeholder='请输入持卡人姓名'
                    value={this.state.name} isLast={false} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onCardNumberTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*卡号：</Text>
                    }
                    maxLength={20}
                    placeholder='请输入卡号'
                    value={this.state.card_number} isLast={false} />
                <MyInput1
                    style={{ marginTop: 0 * unitWidth }}
                    onChangeText={this.onOpeningBankTextChange.bind(this)}
                    title={
                        <Text style={{ color: Colors.black, fontSize: 17 }}>*开户行：</Text>
                    }
                    maxLength={50}
                    placeholder='请输入开户行'
                    value={this.state.opening_bank} isLast={false} />
                <SubmitButton1 style={{ marginTop: 200 * unitWidth, alignSelf: 'center' }} text='确定' onPress={() => {
                    this.submit();
                }} />
            </View>
        );
    }

    onNameTextChange(text) {
        this.setState({
            name: text
        })
    }

    onCardNumberTextChange(text) {
        this.setState({
            card_number: text,
        })
    }

    onOpeningBankTextChange(text) {
        this.setState({
            opening_bank: text
        })
    }

    submit() {
        if (this.state.name == '') {
            show('请输入持卡人姓名');
            return;
        } else if (this.state.card_number == '') {
            show('请输入卡号');
            return;
        } else if (this.state.opening_bank == '') {
            show('请输入开户行');
            return;
        }
        let params = {
            'name': this.state.name,
            'card_number': this.state.card_number,
            'opening_bank': this.state.opening_bank,
        }
        postFetch(api_member_info_addBank, params, {
            success: (response) => {
                show(response.result.message);
                this.props.navigation.pop();
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }
}